<template>
	<div class="wrap">
		<h2 class="title">我的寝室报修</h2>
		<div class="info">
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="repairPerson" label="报修人" width="180" />
				<el-table-column prop="repairId" label="报修ID" width="180" />
				<el-table-column prop="buildId" label="报修楼栋" />
				<el-table-column prop="repairTime" label="申请日期">
					<template #default="{ row }">
						{{ new Date(row.repairTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column label="报修状态">
					<template #default="{ row }">
						<el-button :type="getType(row)" size="small" plain>{{ row.repairStatus }}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="repairContent" label="报修内容" />
				<el-table-column prop="createTime" label="创建时间">
					<template #default="{ row }">
						{{ new Date(row.createTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column prop="dorNumber" label="寝室号" />

				<el-table-column label="操作" width="200" align="center">
					<template #default="{ row }">
						<div >
							<el-button type="warning" size="small" v-if="row.repairStatus == '申请中'" @click="handleShowDialog(row)"
								>修改内容</el-button
							>
							<el-button type="danger" size="small" @click="handleDeleteRepair(row)">删除报修</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="demo-pagination-block">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:page-sizes="pageSizes"
					small="small"
					:background="true"
					layout="total, sizes, prev, pager, next"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>

			<!-- 修改报修申请对话框 -->
			<el-dialog v-model="showDialog" width="500">
				<el-form label-position="left" label-width="100">
					<el-form-item label="报修编号">
						<el-input v-model.number="modRepairInfo.repairId" />
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model.trim="modRepairInfo.phone" />
					</el-form-item>
					<el-form-item label="修改的内容">
						<el-input v-model.trim="modRepairInfo.repairContent" />
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="handleModRepairInfo">确认修改</el-button>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getMyRepairHistory, modRepairApply, delRepairApply } from '@/utils/axios/stuReqest'

const tableData = ref([])
const total = ref(0)
// 当前页
const currentPage = ref(1)

// 每页显示条数
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])

// 显示修改报修对话框
const showDialog = ref(false)

// 需要修改的报修信息
const modRepairInfo = ref({
	repairContent: '',
	repairId: '',
	phone: '',
})

// 处理修改报修点击事件
const handleShowDialog = (val) => {
	modRepairInfo.value.phone = val.phone
	modRepairInfo.value.repairContent = val.repairContent
	modRepairInfo.value.repairId = parseInt(val.repairId)
	showDialog.value = true
}

// 修改报修信息
const handleModRepairInfo = async () => {
	await modRepairApply(modRepairInfo.value)
	let { data } = await getMyRepairHistory({ currentPage: currentPage.value, pageSize: pageSize.value })
	tableData.value = data
	total.value = data.length
	showDialog.value = false
}

// 删除报修信息
const handleDeleteRepair = async (val) => {
	await delRepairApply({ repairId: val.repairId })
	let { data } = await getMyRepairHistory({ currentPage: currentPage.value, pageSize: pageSize.value })
	tableData.value = data
	total.value = data.length
}

const handleSizeChange = async (val) => {
	let { data } = await getMyRepairHistory({ currentPage: currentPage.value, pageSize: val })
	tableData.value = data
}

// 当前页发送变化事件
const handleCurrentChange = async (val) => {
	let { data } = await getMyRepairHistory({ currentPage: val, pageSize: pageSize.value })
	tableData.value = data
}

onMounted(async () => {
	let { data } = await getMyRepairHistory({ currentPage: currentPage.value, pageSize: pageSize.value })
	tableData.value = data
	total.value = data?.length
})

// 获取type
const getType = ({ repairStatus }) => {
	let type = ''
	switch (repairStatus) {
		case '正在安排中':
			type = 'primary'
			break
	}
	return type
}
</script>

<style scoped lang="scss">
.demo-pagination-block {
	margin-top: 10px;
}
</style>
